<template>
  <transition name="dialog-fade">
    <div class="pop-dialog" v-show="showFlag" @click.stop>
      <k-header :title="popTitle" class="pop-title">
        <span slot="overwrite-left" @click="cancel">取消</span>
        <span slot="right" @click="sure">完成</span>
      </k-header>
      <slot name="main"></slot>
    </div>
  </transition>
</template>
<style scoped lang="scss" rel="stylesheet/scss">
  @import "./popdialog.scss";
</style>
<script type="text/ecmascript-6">
  import KHeader from 'base/header/header'

  export default {
    props: {
      popTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        showFlag: false
      }
    },
    methods: {
      show() {
        this.showFlag = true
      },
      hide() {
        this.showFlag = false
      },
      cancel() {
        this.hide()
        this.$emit('cancel')
      },
      sure() {
        this.hide()
        this.$emit('success')
      }
    },
    components: {
      KHeader
    }
  }
</script>
